<template>
<view class="box animateUp animation" >
  <view v-for="(item,index) in colorist" class="color-item" :key="index" :style="{backgroundColor: item.color}"
        @click="switchTheme(item.id)"></view>
  <view class="color-item" @click="ColorMatch" :style="'background-color:'+nowColor">
    <text>更多</text>
  </view>
</view>
</template>

<script>
import colorList from "@/layout/colorMatching";
import {mapState} from  "vuex"
export default {
name: "changeColor",
  data(){
  return{
    colorist:colorList[1].lessList,
  }
  },
  methods:{
    switchTheme(a){
    this.$emit('switchTheme',a)
      console.log(a)
    },
    ColorMatch(){
      uni.navigateTo({
        url:'components/ColorMatching'
      })
    }
  },
  computed:{
  ...mapState({
    nowColor:state => state.nowColor
  })
  }
}
</script>

<style lang="scss" scoped>
//.box{
//  transition: all 5s;
//  -ms-transition: all 1s; /* Safari 和 Chrome */
//  -webkit-transition: all 1s; /* Safari 和 Chrome */
//  /*behavior: url(/webapps/PIE-css3/PIE.htc);*/
//}
.box{
  width: 500rpx;
  height: 110rpx;
  background-color: #FFFFFF;
  box-shadow: 0 0 30rpx #DBDBDB;
  position: fixed;
  border-radius: 20rpx;
  bottom: 200rpx;
  left: calc(50% - 250rpx);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 3000;
  .color-item{
    width: 70rpx;
    height: 70rpx;
    border-radius: 15rpx;
    //align-items: center;
    text-align: center;
    line-height: 70rpx;
    color: #FFFFFF;
    //@include global-header-background-color();
  }
}
@-webkit-keyframes animateUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier( 1.000,0.610, 0.355,0.215 );
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000rpx, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -25rpx, 0);
  }

  75% {
    transform: translate3d(0, 10rpx, 0);
  }

  95% {
    transform: translate3d(0, -5rpx, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.animateUp {
  animation-name: animateUp;
}
.animation {
  //-webkit-animation-duration: 1s;
  animation-duration: 1.5s;
  //-webkit-animation-fill-mode: both;
  //animation-fill-mode: both;
}
</style>
